<script setup>
import { onMounted, ref } from 'vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import icon_house from '@/assets/imgs/ic_fwzs.png'
import {
    getMonitorAndSupervise,
    getAcceptanceNum,
    getRectificationQuantity,
    getSiteQualitySecure,
} from './api.js'



const unitObj = {
    '监测中心数': '家', '监测抽测数':'家', '检查记录': '个', '检查人次':'人次','检查人数':'个',
    '验收数量': '个', '验收通过':'个','验收不通过':'个',
    '竣工验收数量': '个','竣工验收通过': '个','竣工验收不通过': '个','竣工验收造价': '亿','竣工验收面积': '万平',
    '整改数量': '个','完成整改': '个','未完成整改': '个','停工数量': '个','已完成停工': '个','未完成停工': '个',
} 
const acceptanceList = ref([])
const completedAcceptanceList = ref([])
const acceptanceRate = ref('00.00')
const completedAcceptanceRate = ref('00.00')

const updateDataAcceptance = (data) => {
    const aRate = data['验收通过率']
    const caRate = data['竣工验收通过率']
    acceptanceRate.value = aRate > 9 ? '' + aRate.toFixed(2) : '0' + aRate.toFixed(2)
    completedAcceptanceRate.value = caRate > 9 ? '' + caRate.toFixed(2) : '0' + caRate.toFixed(2)

    acceptanceList.value = [
      {
        name: '验收数量',
        value: data['验收数量'],
        unit: unitObj['验收数量']
      },
      {
        name: '验收通过',
        value: data['验收通过'],
        unit: unitObj['验收通过'],
      },
      {
        name: '验收不通过',
        value: data['验收不通过'],
        unit: unitObj['验收不通过'],
      },
    ]

    completedAcceptanceList.value = [
        {
        name: '竣工验收数量',
        value: data['竣工验收数量'],
        unit: unitObj['竣工验收数量']
      },
      {
        name: '竣工验收通过',
        value: data['竣工验收通过'],
        unit: unitObj['竣工验收通过'],
      },
      {
         name: '竣工验收不通过',
        value: data['竣工验收不通过'],
        unit: unitObj['竣工验收不通过'],
      },
      {
        name: '竣工验收造价',
        value: data['竣工验收造价'],
        unit: unitObj['竣工验收造价'],
      },
      {
         name: '竣工验收面积',
        value: data['竣工验收面积'],
        unit: unitObj['竣工验收面积'],
      },
    ]
}

const getChartGaugeOption = ({ title, percent }) => {
    const color = {
        '整改完成率': {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0, color: '#14BDFF' // 0% 处的颜色
            }, {
                offset: 1, color: '#00F4EA' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        '停工完成率': {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0, color: '#03E4C2' // 0% 处的颜色
            }, {
                offset: 1, color: '#4EF3DD' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
    }
  return {
    series: [
      {
        type: 'gauge',
        center: ['75%', '50%'],
        progress: {
          show: true,
          width: 10,
          itemStyle: {
            color: color[title]
          }
        },
        axisLine: {
          lineStyle: {
            width: 10
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 15,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        pointer: {
            show: false,
        },
        axisLabel: {
          show: false,
          distance: 25,
          color: '#999',
          fontSize: 20
        },
        anchor: {
          show: false,
        },
        title: {
          show: true,
          fontSize: 16,
          color: '#fff',
          offsetCenter: [0, '90%']
        },
        detail: {
          valueAnimation: true,
          fontSize: 18,
          offsetCenter: [0, 0],
          color: 'inherit',
          formatter: '{value}%'
        },
        data: [
          {
            name: title,
            value: percent
          }
        ]
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    // animationDuration: 0,
    // animationDurationUpdate: 3000,
    // animationEasing: 'linear',
    // animationEasingUpdate: 'linear'
  }
}


const barColors = [
{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#FFE676' // 0% 处的颜色
    }, {
        offset: 1, color: '#FF933A' // 100% 处的颜色
    }],
    global: false // 缺省为 false
    },
    {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: '#CBFBFF' // 0% 处的颜色
    }, {
        offset: 1, color: '#02AAFA' // 100% 处的颜色
    }],
    global: false // 缺省为 false
    }
]
const getChartBarOption = (data) => {
  return {
    backgroundColor: 'transparent',
    tooltip: {
       trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
      top: 'top',
      right: '14%',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 30,
    },
    grid: {
      left: '4%',
      right: '4%',
      top: '12%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: [
      {
        name: '监测记录数',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
      {
        name: '监测人次',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      }
    ],
    series: data.series.map((item,i)=> {
        return item.type == 'bar' ? {
            name: item.name,
            type: 'bar',
            yAxisIndex: i,
            itemStyle: {
                color: barColors[item.colorIndex]
            },
            emphasis: {
                focus: 'series'
            },
            data: item.data, // [320, 302, 301, 334, 390, 330, 320]
        } : {
            name: item.name,
            type: 'line',
            yAxisIndex: i,
            smooth: true,
            lineStyle: {
                width: 2
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#0C5A82'
                },
                {
                    offset: 1,
                    color: '#0C5A8223'
                }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: item.data, // [320, 302, 301, 334, 390, 330, 320]
        }
    })
  }
}
const qsStatisticsCharBarRef = ref(null)
const updateDataQsStatistics = (data) => {
    const types = ['bar', 'line']
    data.series = ['检查记录数', '检查人数'].map((name, i) => {
        return {
            name,
            type: types[i], 
            data: data.dataList[name],
            colorIndex: i,
        }
    })
    qsStatisticsCharBarRef.value?.updateOption(getChartBarOption(data))
}
const reqQsStatistics = () => {
    getSiteQualitySecure({ type: activeName.value })
        .then((res) => {
            updateDataQsStatistics(res.data)
        })
}
  
// 完成率
const rectificationRateCharGaugeRef = ref(null)
const downtimeRateCharGaugeRef = ref(null)
const rectificationData = ref({})
const updateDataRate = (data) => {
    rectificationData.value = data

  rectificationRateCharGaugeRef.value?.updateOption(getChartGaugeOption({ title: '整改完成率', percent: data['整改完成率'] }))

  downtimeRateCharGaugeRef.value?.updateOption(getChartGaugeOption({ title: '停工完成率', percent: data['停工完成率'] }))
}

const isLoading = ref(false)
const tabList = ref([
    '检查数量', '验收数量', '竣工验收数量', '整改数量', '停工数量'
])
const activeName = ref('检查数量')
const handelTabChange = (name) => {
    activeName.value = name
    reqQsStatistics()
}

const monitoredList = ref([])
const updateDataMonitored = (data) => {
    monitoredList.value = Object.entries(data).map(([key, value]) => ({
        name: key,
        value,
        unit: unitObj[key]
    }))
}

const reqData = () => {
    isLoading.value = true
    Promise.all([
        getMonitorAndSupervise(),
        getAcceptanceNum(),
        getRectificationQuantity(),
        getSiteQualitySecure({ type: '检查数量' }),
    ]).then((res) => {
        console.log('res', res)
        if (res[0].success) {
            console.log('res[0].data', res[0].data)
            updateDataMonitored(res[0].data || {})
        }
        if (res[1].success) {
            updateDataAcceptance(res[1].data)
        }
        if (res[2].success) {
            updateDataRate(res[2].data)
        }
        if (res[3].success) {
            updateDataQsStatistics(res[3].data)
        }
    }).finally(() => {
        isLoading.value = false
    })
}

onMounted(() => {
    reqData()
})

</script>

<template>
    <div class="full-wrap">
        <div class="row">
            <div class="panel panel-monitored">
                <div class="panel-title">监测监督</div>
                <div class="panel-content">
                    <div class="invest-info-list">
                        <div class="inv-info-item" v-for="item in monitoredList" :key="item.name">
                            <div class="content">
                                <div class="title">{{ item.name }}</div>
                                <div class="value">{{ item.value }}
                                    <span class="unit">{{ item.unit }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel this-year-acceptance">
                <div class="panel-title">今年验收数</div>
                <div class="panel-content">
                    <div class="rate-bar">
                        验收通过率
                        <span class="number">
                           {{  acceptanceRate[0] }} 
                        </span>
                        <span class="number">
                           {{  acceptanceRate[1] }} 
                        </span>
                        <span class="dot">
                            ●
                        </span>
                        <span class="number">
                           {{  acceptanceRate[3] }} 
                        </span>
                        <span class="number">
                           {{  acceptanceRate[4] }} 
                        </span>
                        %
                    </div>
                    <div class="list">
                        <div class="list-item" v-for="item in acceptanceList" :key="item.name">
                            <span class="value">
                                {{ item.value }}
                                <span class="unit">{{ item.unit }}</span>
                            </span>
                            <span class="name">{{ item.name }}</span>
                        </div>
                    </div>
                    <div class="rate-bar">
                        竣工验收通过率
                        <span class="number">
                            {{ completedAcceptanceRate[0] }} 
                        </span>
                        <span class="number">
                            {{ completedAcceptanceRate[1] }} 
                        </span>
                        <span class="dot">
                            ●
                        </span>
                        <span class="number">
                           {{  completedAcceptanceRate[3] }} 
                        </span>
                        <span class="number">
                           {{  completedAcceptanceRate[4] }} 
                        </span>
                        %
                    </div>
                    <div class="list completedAcceptanceList">
                        <div class="list-item" v-for="item in completedAcceptanceList" :key="item.name">
                            <span class="value">
                                {{ item.value }}
                                <span class="unit">{{ item.unit }}</span>
                            </span>
                            <span class="name">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel this-year-rectifications">
                <div class="panel-title">今年整改数</div>
                <div class="panel-content">
                    <div class="chart">
                        <draw-echarts
                            ref="rectificationRateCharGaugeRef"
                            width="580"
                            height="160"
                            :options="{}"
                        ></draw-echarts>
                            <div class="detail-panel">
                                <div class="detail-item">整改数量：<span class="value">{{ rectificationData['整改数量'] }}个</span></div>
                                <div class="detail-item">完成整改：<span class="value">{{ rectificationData['完成整改'] }}个</span></div>
                                <div class="detail-item">未完成整改：<span class="value">{{ rectificationData['未完成整改'] }}个</span></div>
                            </div>
                        </div>
                        <div class="chart">
                            <draw-echarts
                            ref="downtimeRateCharGaugeRef"
                            width="580"
                            height="160"
                            :options="{}"
                        ></draw-echarts>
                        <div class="detail-panel detail-downtime">
                            <div class="detail-item">停工数量：<span class="value">{{ rectificationData['停工数量'] }}个</span></div>
                            <div class="detail-item">已完成停工：<span class="value">{{ rectificationData['已完成停工'] }}个</span></div>
                            <div class="detail-item">未完成停工：<span class="value">{{ rectificationData['未完成停工'] }}个</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="panel panel-total">
                <div class="panel-title">各站点质量安全统计</div>
                <div class="panel-content">
                    <div class="tab-list">
                        <div class="tab-list-item" :class="activeName === item ? 'on' : ''" v-for="item in tabList" @click="handelTabChange(item)">{{ item }}</div>
                    </div>
                    <div class="tab-content">
                        <div class="chart">
                            <draw-echarts
                                ref="qsStatisticsCharBarRef"
                                width="1700"
                                height="320"
                                :options="{}"
                            ></draw-echarts>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.full-wrap {
    height: 100%;
}
.row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    
    .panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 410px;
        margin-bottom: 20px;
        padding: 10px 0 20px 0;
        border: 1px solid;
        border-top: none;
        border-image: linear-gradient(to bottom, rgba(6, 79, 147, 0), #064F93) 1;
        background: linear-gradient(to bottom, #0A143E35, #0A143E);
        .panel-title {  
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            z-index: 1020;
        }
        .panel-content {
        }
    }

    .panel-monitored {
        .invest-info-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 26px;
            margin-top: 20px;
            margin-bottom: 20px;
            height: 290px;


            .inv-info-item {
                width: 30%;
                margin-left: 30px;
                margin-right: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-image: url('@/assets/imgs/house_rent_bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                .icon {
                    width: 70px;
                    height: 70px;
                    object-fit: cover;
                }
                .content {
                    width: 5em;
                    text-align: center;
                    .value {
                        font-weight: bold;
                        color: #F7E004;
                        margin-bottom: 8px;
                        font-size: 24px;
                    }
                    .title {
                        color: #C7E2FE;
                    }
                    .unit {
                        font-size: 12px;
                    }
                }
            }
        }
        .chart-title {
            color: #C7E2FE;
            margin-left: 4%;
        }
    }

    .this-year-acceptance {
        .panel-content {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            .rate-bar {
                height: 40px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                background: linear-gradient(to right,#0A2D6F00,#0A2D6F, #0A2D6F00);
                
                .number {
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    height: 30px;
                    width: 20px;
                    margin-left: 4px;
                    margin-right: 4px;
                    font-size: 18px;
                    font-weight: bold;
                    border: 1px solid #0777DE;
                    color: #FFD256;
                    &::before {
                        position: absolute;
                        top: 3px;
                        left: -4px;
                        content: '';
                        display: inline-block;
                        height: 24px;
                        width: 6px;
                        border-radius: 50%;
                        background: #0A2D6F;
                    }
                     &::after {
                        position: absolute;
                        top: 3px;
                        right: -4px;
                        content: '';
                        display: inline-block;
                        height: 24px;
                        width: 6px;
                        border-radius: 50%;
                        background: #0A2D6F;
                    }
                }
                .dot {
                    margin-left: 4px;
                    margin-right: 4px;
                    color: #FFD256;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .list {
                display: flex;
                justify-content: space-between;
                color: #C7E2FE;
                padding: 10px 20px;

                .list-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 150px;
                    height: 100px;
                    background-image: url('@/assets/imgs/house_rent_bg.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    .name {
                        display: inline-block;
                        width: 5em;
                        text-align: center;
                    }
                    .value {
                        font-weight: bold;
                        color: #FFD256;
                        .unit {
                            color: #fff;
                            font-size: 12px;
                            font-weight: normal;
                        }
                    }
                }
            }
            .completedAcceptanceList {
                padding: 10px 20px;
                .list-item {
                    flex-direction: column-reverse;
                    width: 100px;
                    height: 100px;
                    .name {
                        width: 4em;
                    }
                }
            }
        }
    }

    .this-year-rectifications {
        .panel-content {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            .chart {
                position: relative;

                .detail-panel {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 50%;
                    color: #fff;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    gap: 16px;

                    .detail-item {
                        width: 100%;
                        display: flex;
                        border-top: 1px solid #0653AA;
                        border-bottom: 1px solid #017EF2;
                        background: linear-gradient(#08255B, #08316F);
                        padding: 8px 20px;
                        .value {
                            margin-left: auto;
                        // font-size: 24px;
                            font-weight: bold;
                            background: linear-gradient(to right, #14BDFF, #00F4EA);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                }
                .detail-downtime {
                    .detail-item {
                        border-top: 1px solid #03E4C2;
                        border-bottom: 1px solid #4EF3DD;
                    }
                }
            }
        }
    }

    
    .panel-total {
        width: 100%;

        .panel-content {
            padding: 10px 20px 20px 20px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }
        .tab-list {
            display: flex;
            flex-direction: column;
            gap: 30px;
            .tab-list-item {
                width: 160px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #125B9F;
                border: 1px solid #125B9F;
                cursor: pointer;
            }
            .tab-list-item.on {
                color: #04A7FF;
                border: 1px solid #04A7FF;
            }
        }
        .tab-content {
            margin-top: 16px;
        }
    }

}
</style>